<script setup>
import { ref, defineOptions } from 'vue'
import { commonFunc } from '@/api/getAxios_1'

// 都市-本期主打
const currentMain = ref([])
const loading = ref(true)

commonFunc('8570', '4').then((res) => {
    // console.log(res);
    currentMain.value = res.data.data.list
    loading.value = false

})

//***************************************** */

// 万和亿的换算
const getNumType = (num) => {
    if (num / 10000 >= 10000) {
        return (num / 100000000).toFixed(1) + '亿人气值'
    } else {
        return (num / 10000).toFixed(1) + '万人气值'
    }
}

//***************************************** */

</script>
<template>
    <div class="current-main" v-if="!loading">
        <h1 class="recommend">
            <span>本期主打</span>
        </h1>
        <ul class="box">
            <li v-for="item in currentMain" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.story.smallCover" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{ item.story.name }}</p>
                    <p class="detail">{{ item.story.introduce }}</p>
                    <p class="type">
                        <span class="author-type">{{ item.story.author }} | {{ item.story.type }}</span>
                        <span class="fireValue">{{ getNumType(item.story.fireValue) }}</span>
                    </p>
                </div>
            </li>
            <li>
                <!-- <div class="little" v-for="(data, index) in suspense"> -->
                <!-- <template v-if="index !== 0">
                                                <img :src="data.story.smallCover" alt="">
                                                <p class="title">{{ data.story.name }}</p>
                                            </template> -->
                <!-- </div> -->
            </li>
        </ul>
    </div>
    <div v-else="loading" class="loading">
        <h1>
            <van-skeleton :row="1" />
        </h1>
        <ul>
            <li v-for="i in 4">
                <div class="img">
                    <van-skeleton :row="1" />
                </div>

                <div class="info">
                    <van-skeleton :row="1" />
                    <van-skeleton :row="1" />
                    <van-skeleton :row="1" />
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.current-main {
    height: 204vw;
    background-color: #fff;
    margin-bottom: 15px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;

        span.jump {
            position: absolute;
            right: 0;
            font-size: 26px;
            margin-right: 20px;
        }
    }
}

ul.box {
    display: flex;
    flex-direction: column;

    li {
        padding: 10px;
        height: 40vw;
        display: flex;

        .coverImg {

            border-radius: 10px;
            width: 30vw;
            height: 40vw;

            img {
                border-radius: 10px;
                box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

                width: 100%;
                height: 100%;
            }
        }

        .msg {
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 68vw;
            margin-left: 10px;

            .name {
                font-size: 18px;

            }

            .detail {
                display: -webkit-box;
                text-align: center;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #939296;
                font-size: 14px;
                text-align: left;
            }

            .type {

                color: #939296;
                font-size: 12px;

                .fireValue {
                    margin-left: 20px;
                    color: #ccae59;
                }
            }


        }

    }
}


.loading {
    // margin-top: 10px;
    background-color: #fff;

    h1 {
        padding-top: 10px;
        // margin-top: 10px;
        margin-left: 30vw;
    }

    ul {
        margin-top: 20px;

        li {
            display: flex;
            width: 100vw;
            height: 37vw;
            margin-bottom: 10vw;
            margin: 0 auto;

            .img {
                width: 50vw;
                height: 100%;
                --van-skeleton-paragraph-width: 37vw;

                .van-skeleton {
                    width: 50vw;
                    // height: 30vw;
                }

                --van-skeleton-paragraph-height: 30vw;

                .van-skeleton-paragraph {
                    // width: var(--van-skeleton-paragraph-width);
                    height: var(--van-skeleton-paragraph-height);
                }
            }

            .info {

                width: 60vw;

                .van-skeleton {
                    margin-top: 5vw;

                    // height: 30vw;
                }
            }
        }
    }
}
</style>